<template>
  <div>
    <!-- 使用 el-upload 组件 -->
    <el-upload
      class="upload-demo"
      drag
      action=""
      :auto-upload="false"
      :on-progress="handleProgress"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      :show-file-list="true"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <!-- 手动上传按钮 -->
    <el-button type="primary" @click="submitUpload">开始上传</el-button>

    <!-- 展示上传进度 -->
    <el-progress v-if="uploading" :percentage="uploadPercentage" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        uploadPercentage: 0,
        uploading: false
      }
    },
    methods: {
      // 上传前的钩子函数，可以用于验证文件类型或大小等
      beforeUpload(file) {
        const isLt500M = file.size / 1024 / 1024 < 500
        if (!isLt500M) {
          this.$message.error('上传文件大小不能超过500MB!')
        }
        return isLt500M
      },

      // 文件上传时的钩子函数
      handleProgress(event, file, fileList) {
        this.uploading = true
        this.uploadPercentage = Math.round((event.loaded * 100) / event.total)
      },

      // 文件上传成功的钩子函数
      handleSuccess(response, file, fileList) {
        this.uploading = false
        this.uploadPercentage = 100
        this.$message.success('文件上传成功')
      },

      // 文件上传失败的钩子函数
      handleError(file, fileList) {
        this.uploading = false
        this.$message.error('文件上传失败')
      },
      submitUpload() {}
    }
  }
</script>

<style scoped>
  /* 根据需要添加样式 */
</style>
